<template>
	<view class="center">
		<view class="userInfo" @click.capture="toUserInfo">
			<cloud-image width="150rpx" height="150rpx" v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="userInfo.avatar_file.url"></cloud-image>
			<view v-else class="defaultAvatarUrl">
				<uni-icons color="#ffffff" size="50" type="person-filled" />
			</view>
			<view class="logo-title">
				<text class="uer-name" v-if="hasLogin">{{userInfo.nickname||userInfo.username||userInfo.mobile}}</text>
				<text class="uer-name" v-else>{{$t('mine.notLogged')}}</text>
			</view>
		</view>

		<!-- 余额信息 -->
		<view class="balance-box">
			<view class="balance-item">
				<text class="balance-label">账户余额</text>
				<text class="balance-value">¥ {{balance || '0.00'}}</text>
			</view>
		</view>

		<!-- 功能列表 -->
		<uni-list class="center-list">
			<uni-list-item title="我的订单" link :clickable="true" to="/pages/ucenter/orders/list" :show-extra-icon="true" :extraIcon="{type:'list',color:'#999'}">
			</uni-list-item>
			<uni-list-item title="问题与反馈" link :clickable="true" to="/uni_modules/uni-feedback/pages/opendb-feedback/opendb-feedback" :show-extra-icon="true" :extraIcon="{type:'help',color:'#999'}">
			</uni-list-item>
			<uni-list-item title="设置" link :clickable="true" to="/pages/ucenter/settings/settings" :show-extra-icon="true" :extraIcon="{type:'gear',color:'#999'}">
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	export default {
		data() {
			return {
				balance: '0.00'
			}
		},
		computed: {
			userInfo() {
				return store.userInfo
			},
			hasLogin(){
				return store.hasLogin
			}
		},
		onShow() {
			console.log('页面显示，登录状态：', this.hasLogin)
			console.log('用户信息：', this.userInfo)
			// 获取用户余额
			if (this.hasLogin) {
				this.getUserBalance()
			}
		},
		methods: {
			toUserInfo() {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
				})
			},
			// 获取用户余额
			async getUserBalance() {
				try {
					console.log('开始获取用户余额，用户ID：', this.userInfo._id)
					const db = uniCloud.database()
					const userRes = await db.collection('uni-id-users')
						.where({
							_id: this.userInfo._id
						})
						.field({
							balance: true
						})
						.get()
					
					console.log('查询用户余额结果：', userRes)
					
					if (userRes.result && userRes.result.data && userRes.result.data.length > 0) {
						const balance = userRes.result.data[0].balance || 0
						console.log('原始余额：', balance)
						this.balance = balance.toFixed(2)
						console.log('格式化后余额：', this.balance)
					} else {
						console.log('未找到用户余额数据')
					}
				} catch (e) {
					console.error('获取用户余额失败：', e)
				}
			}
		}
	}
</script>

<style>
	.center {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.userInfo {
		background-color: #4CAF50;
		padding: 40rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.defaultAvatarUrl {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.logo-title {
		margin-top: 20rpx;
	}
	
	.uer-name {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.balance-box {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	}
	
	.balance-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.balance-label {
		font-size: 28rpx;
		color: #666;
	}
	
	.balance-value {
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
	}
	
	.center-list {
		margin-top: 20rpx;
	}
</style>
